<template>
  <div>
    <!-- 1.内置组件 component 动态组件
    is 属性="组件名" -->
    <button @click="comName='oneCom'">第一个</button>
    <button  @click="comName='twoCom'">第二个</button>
    <!-- keep-alive 包裹动态组件的 缓存组件 不会销毁组件 他会产生俩个新的生命周期
       activated 组件的激活  deactivated 组件的失活
      include ='组件的name,组件的name' include是要缓存的组件名
       exclude ="组件的name,组件的name" 不缓存的组件名

     -->
    <keep-alive include="vueOne" exclude="vueTwo">
          <component :is="comName"></component>
     </keep-alive>
    <hr>
   

  </div>
</template>

<script>
import oneCom from './one.vue'
import twoCom from './two.vue'
export default {
  name: 'mycom', //name组件 名 他在打包和缓存等场景会应用  不能以数字开头 不能以原生标签命名
  components:{
    oneCom,
    twoCom,

  },
  data() {
    return {
      comName:"oneCom"
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>